<!-- 传送组件 -->
<template>
  <div class="parent">
    <h2>父级，我里面有个弹框组件</h2>
    <!-- 此时这个弹框组件的Dom，在这个父组件的Dom之中。如父组件的定位属性可能会影响到子组件的定位，比如父组件添加position:relative。子组件就会被定位在父组件中间，而不是我们想要的整个屏幕中间 -->
    <!-- <Dialog></Dialog> -->

    <!-- 使用vue3内置组件Teleport，可以让子组件的Dom传送到我们希望的节点下，比如我们可以让子组件节点传送到body下,则子组件的Dom节点就不会在父组件的Dom中 -->
    <Teleport to="body">
        <Dialog></Dialog>
    </Teleport>
    
    <!-- Teleport 还有一个属性，disable=true/false,  用于表示是否启用传送 -->
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
import Dialog from './dialog.vue'

</script>
<style scoped>
* {
    margin: 0;
    padding: 0;
}
.parent {
    height: 50vh;
    background-color: aqua;
    position: relative;
}
</style>